<html>
<head>
<title>File APIを用いてPC上の画像ファイルをプレビュー表示&拡大縮小テスト</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
function preview (e) {
 // ファイル未選択
 if (!e.files.length) return;
 // ファイルを取得する
 // 想定したMIMEタイプでない場合には処理しない
 var errMsg = "";
 for (var i = 0; i < e.files.length; i++) {
  var file = e.files[i];
  if (!/^image\/(png|jpeg|gif)$/.test(file.type)) {
   errMsg += "ファイル名: " + file.name + ", 実際のMIMEタイプ: " + file.type + "\n\n";
   continue;
  }
// Imageを作成
  var img = document.createElement('img');
  var fr = new FileReader();
  fr.tmpImg = img;
  fr.onload = function () {
  this.tmpImg.src = this.result;
// ★ name="rfq"を img タグに付け加えます　★
  this.tmpImg.onload = function(){document.getElementById('previewArea').appendChild(this).setAttribute("name","rfq");}
   }
 // 画像読み込み
 fr.readAsDataURL(file);
 } // for end
  if (errMsg != "") {
   errMsg = "以下ファイルはMIMEタイプが対応していません。\n"
          + "MIMEタイプはimage/png, image/jpeg, image/gifのみ対応です。\n\n"
          + errMsg;
          alert(errMsg);
  }
}
// 拡大縮小　JavaScript
var i=0;
timeID=0;
function kakudai(){
 var xw =document.rfq.height;
 var yh =document.rfq.width;
 for (i=0;i<10;i++){
  w=xw*(1+0.1*i);
  h=yh*(1+0.1*i);
  document.rfq.height=w;
  document.rfq.width=h;
 }
}
function shuku(){
 var xw =document.rfq.height;
 var yh =document.rfq.width;
 for (i=0;i<10;i++){
  w=xw*(1-0.05*i);
  h=yh*(1-0.05*i);
  document.rfq.height=w;
  document.rfq.width=h;
 }
}
</script>
<style type="text/css">
#previewArea img {padding:10px; height:auto;}/* ★ 高さをautoにする */
</style>
</head>
<body>
<br />
<br />
<input type="file" name="file" onchange="preview(this);" multiple="multiple"/><br>
<span style="font-size:small;">※ 複数ファイル選択可</span><br>
<br>
<div id="previewArea" style="width:90%; height:300px; border:1px solid #888; border-radius:15px; overflow-y:auto;">
</div>
<input type="button" value="縮小" onClick="shuku()">
<input type="button" value="拡大" onClick="kakudai()">
</body>
</html>

